<template>
  <header class="VPNav">
    <div class="VPNavBar has-sidebar">
      <div class="app-header-main container">
        <div class="VPNavBarTitle has-sidebar">
          <a class="title" href="/"><img class="VPImage logo" src="/logo.png" alt="" />{{ ProjectName }}</a>
        </div>
        <div class="content">
          <nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu mr-5">
            <NuxtLink v-for="link in ROUTES_LINKS" :key="link.path" :to="link.path" :target="`${link.isBlank ? '_blank' : ''}`" class="VPLink link VPNavBarMenuLink">{{ link.title }}</NuxtLink>
          </nav>
        </div>
        <div class="w-80 text-right app-header-search">
          <AppSearch @handleSearch="onSearch" />
        </div>
      </div>
    </div>
  </header>
</template>
<script setup lang="ts">
import { ProjectName, ROUTES_LINKS } from '@/config'
import AppSearch from '@/components/AppSearch/index.vue'

const router = useRouter()

// 搜索
const onSearch = ({ title, navId }: any) => {
  router.push({ path: `/search/${title}`, query: { navId } })
}
</script>
